<template>
	<div style="padding: 15px;">
		<el-collapse v-model="state.activeName" accordion>
			<el-collapse-item v-for="item in state.collapseData" :key="item.code" :title="item.name" :name="item.code">
				<el-tabs type="border-card">
					<el-tab-pane v-for="formItem in item.children" :label="formItem.name">
						<el-form label-width="auto">
							<el-form-item :label="listItem.title" v-for="listItem in formItem.dictInfo"
								style="margin-left: 30px;">
								<el-radio-group v-if="listItem.label === 1" v-model="listItem.value">
									<el-radio :label="option" v-for="option in listItem.options" :key="option">{{ option
									}}</el-radio>
								</el-radio-group>

								<el-checkbox-group v-if="listItem.label === 2" v-model="listItem.values">
									<el-checkbox :label="option" v-for="option in listItem.options" :key="option" />
								</el-checkbox-group>

								<div v-if="listItem.label === 3">
									<el-input v-if="listItem.valueType < 1" v-model="listItem.value"></el-input>
									<el-input-number v-else-if="listItem.valueType === 1"
										v-model="listItem.value"></el-input-number>
									<el-date-picker v-model="listItem.value" type="date"
										v-else-if="listItem.valueType === 2" :format="'YYYY-MM-DD'"
										:value-format="'YYYY-MM-DD'" style="width: 100%" />
									<el-time-picker v-model="listItem.value" type="time"
										v-else-if="listItem.valueType === 3" :format="'HH:mm:ss'" :value-format="'HH:mm:ss'"
										style="width: 100%" />
									<el-date-picker v-model="listItem.value" type="datetime"
										v-else-if="listItem.valueType === 4" :format="'YYYY-MM-DD HH:mm:ss'"
										:value-format="'YYYY-MM-DD HH:mm:ss'" style="width: 100%" />
								</div>

								<el-select v-if="listItem.label === 4" clearable v-model="listItem.value">
									<el-option v-for="option in listItem.options" :key="option" :label="option"
										:value="option" />
								</el-select>
							</el-form-item>
							<div style="display: flex;justify-content: end;padding-right: 20px;margin-top: 10px;">
								<el-button type="primary" size="small" plain @click="updateInfo(formItem)">保存</el-button>
								<el-button type="info" size="small" plain @click="resetInfo(item)">重置</el-button>
							</div>
						</el-form>
					</el-tab-pane>
				</el-tabs>
			</el-collapse-item>
		</el-collapse>
	</div>
</template>

<script setup lang="ts">
import { onMounted, reactive } from 'vue'
import { useSystemParamListApi, useSystemParamUpdateApi } from '/@/api/system/param';
import { ElMessage } from 'element-plus';

const state = reactive({
	activeName: '',
	collapseData: [] as any,
})

const updateInfo = (row: any) => {
	useSystemParamUpdateApi(row).then(() => {
		ElMessage.success("修改成功")
	})
}

const resetInfo = (row: any) => {
	row.children.forEach((childrenItem: any) => {
		console.log(childrenItem, 'childrenItem')
		childrenItem.dictInfo.forEach((element: any) => {
			console.log(element, 'element')
			element.value = element.defaultValue
			element.values = element.defaultValues || []
		});
	})
}

const getcollapseData = () => {
	useSystemParamListApi().then(({ content }) => {
		state.collapseData = content
		// state.activeName = state.collapseData[0]["code"]
	}
	)
}
// 页面加载时
onMounted(() => {
	getcollapseData()
});
</script>

<style scoped lang="scss">
.table-demo-container {
	.table-demo-padding {
		padding: 15px;

		.table-demo {
			flex: 1;
			overflow: hidden;
		}
	}
}

:deep(.el-collapse-item__header) {
	font-weight: bold;
	padding-left: 10px;
}

:deep(.el-collapse-item__content) {
	padding-bottom: 15px;
}
</style>
